<!-- 文件卡片 -->
<template>
  <div>
    <div class="m-fic mr-4 ml-4 mt-4 p-2 grid m-default-card">
      <div class="col-1 text-center" v-html="renderValues.vHtmlContent">
      </div>
      <!-- 文件主体信息 -->
      <div class="col-10">
        <div class="grid">
          <div class="col-12 grid">
            <div class="col-12 flex" style="padding: 0;">
              <span class="m-fic-title"
                    :class="{'m-stop-cursor': isOpenDownload}"
                    @click="fileItemClickHandler(renderValues.fileName)">
                {{ renderValues.fileName }}
              </span>
            </div>
            <div class="m-fic-date col-12" style="padding: 0;">
              {{ renderValues.createDate }}
            </div>
          </div>
          <div class="m-fic-desc col-11 mt-2" style="padding: 0;">
            {{ renderValues.desc }}
          </div>
        </div>
      </div>
      <!-- 评论箭头 -->
      <div class="col-1 flex align-items-end flex-wrap justify-content-end m-fic-open-svg">
        <span @click="showFileComment($event)">
          <svg class="icon"
               style="cursor: pointer;"
               viewBox="0 0 1024 1024"
               xmlns="http://www.w3.org/2000/svg"
               width="20" height="20">
            <path d="M320 384h384l-192 256z"></path>
          </svg>
        </span>
      </div>
    </div>
    <!-- 评论卡片 -->
    <div :id="`m-fic-comment-${props.fastIndex}`" class="m-fic-comment m-default-card mr-4 ml-4 grid">
      <!-- 评论主体 -->
      <div class="col-12">
        <div class="col-12 grid">
          <!-- 评论用户头像 -->
          <span>
            <Avatar shape="circle"
                    image="https://img.yeziji.xyz/user/avatar/6772f14a204736c2d8c55bbe1dc36869.jpg"/>
          </span>
          <div class="m-fic-comment-author ml-2">
            <!-- 评论用户名 -->
            <div>
              用户xxx
            </div>
            <!-- 用户评论日期 -->
            <div class="m-fic-comment-date">
              2022/10/24 23:45:23
            </div>
          </div>
        </div>
        <!-- 用户评论内容 -->
        <div class="m-fic-comment-text col-12" style="margin-left: 30px;">
          我觉得不太行
        </div>
      </div>
      <!-- 评论主体 -->
      <div class="col-12" v-if="props.fastIndex == 2">
        <div class="col-12 grid">
          <!-- 评论用户头像 -->
          <span>
            <Avatar shape="circle"
                    image="https://img.yeziji.xyz/user/avatar/6772f14a204736c2d8c55bbe1dc36869.jpg"/>
          </span>
          <div class="m-fic-comment-author ml-2">
            <!-- 评论用户名 -->
            <div>
              用户xxx
            </div>
            <!-- 用户评论日期 -->
            <div class="m-fic-comment-date">
              2022/10/24 23:45:23
            </div>
          </div>
        </div>
        <!-- 用户评论内容 -->
        <div class="m-fic-comment-text col-12" style="margin-left: 30px;">
          我觉得不太行
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
/** JS */
import {onMounted, ref, watch, withDefaults, defineProps, reactive} from 'vue';
import {FileService} from '@/utils/ApiRequest';
import download from '@/utils/Download';
import toast from '@/utils/Toast';
/** JSON */
import FileExtSvgJson from '@/assets/json/FileExtSvgJson.json';
import FileExtCommonDesc from '@/assets/json/FileExtCommonDesc.json';

const fileService = new FileService();

let svgKeys: string[] = [];
for (const key in FileExtSvgJson) {
  svgKeys.push(key);
}

interface FileItemCardProps {
  fileName: string,
  createDate: string,
  fileSize: string,
  desc: string,
  fastIndex: number
}

/** 数据钩子以及动态渲染 */
const props = withDefaults(defineProps<FileItemCardProps>(), {
      desc: '作者没对该文件进行介绍哦~'
    }),
    renderValues = reactive({
      fileName: props.fileName,
      createDate: props.createDate,
      desc: props.desc,
      fastIndex: props.fastIndex,
      ext: props.fileName.substring(props.fileName.lastIndexOf('.') + 1),
      fileSize: props.fileSize,
      vHtmlContent: ''
    });
// 构建后缀
const getExt = (str: string) => {
  let index = str.lastIndexOf('.') + 1;
  let ext = str.substring(index);
  if (FileExtCommonDesc.zips.indexOf(ext) !== -1) {
    return 'zip';
  } else if (FileExtCommonDesc.world.indexOf(ext) !== -1) {
    return 'world';
  } else if (FileExtCommonDesc.excel.indexOf(ext) !== -1) {
    return 'excel';
  } else if (FileExtCommonDesc.process.indexOf(ext) !== -1) {
    return 'process';
  } else if (FileExtCommonDesc.exts.indexOf(ext) === -1) {
    return 'unknown';
  }
  return ext;
}
const buildExt = () => {
  renderValues.ext = getExt(renderValues.ext);
  renderValues.vHtmlContent =
      `<div class='grid'>
    <div class='col-12'>
      ${FileExtSvgJson[renderValues.ext]}
    </div>
    <div class='col-12 m-fic-size'>
      ${renderValues.fileSize}
    </div>
  </div>`;
}

watch(props, (n) => {
  Object.assign(renderValues, n);
  renderValues.ext = n.fileName.substring(props.fileName.lastIndexOf('.') + 1);
  buildExt();
}, {deep: true});

/** 评论动画 */
let commentShow = ref(true), currentHeight = ref(0);

function showFileComment(ev) {
  let doc = document.getElementById(`m-fic-comment-${props.fastIndex}`);
  let show = commentShow.value;
  let path: [] = ev.path;
  if (path && path.length > 0) {
    for (let p of path) {
      if (p.nodeName === 'svg') {
        if (show) {
          p.classList.add('rotate-180')
        } else {
          p.classList.remove('rotate-180')
        }
      }
    }
  }

  if (doc) {
    if (show) {
      doc.style.height = currentHeight.value + (1.5 * 16) + 'px';
      doc.style.padding = '1.5rem';
    } else {
      doc.style.height = '0px';
      doc.style.padding = '0px';
    }
  }
  commentShow.value = !commentShow.value;
}

onMounted(() => {
  // 获取高度并初始化高度隐藏
  let doc = document.getElementById(`m-fic-comment-${props.fastIndex}`);
  if (doc) {
    currentHeight.value = doc?.offsetHeight;
    doc.style.height = '0px';
    doc.style.padding = '0px';
  }
  buildExt();
});

/** 下载文件 */
const isOpenDownload = ref(false);
const fileItemClickHandler = async (filename: string) => {
  isOpenDownload.value = true;
  toast.success('提交下载成功', "请耐心等待浏览器的下载提示哦(●'◡'●)~", 3000);
  let res = await fileService.download(filename);
  if (res?.accessUrl) {
    let a = document.createElement('a');
    a.href = res.accessUrl;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    a.remove();
    URL.revokeObjectURL(res.accessUrl);
  }
  isOpenDownload.value = false;
}
</script>

<style lang="less" scoped>
.rotate-180 {
  transform: rotate3d(1, 0, 0, 180deg) !important;
}

.m-fic {
  border-radius: 0;
}

.m-fic-title {
  color: #3D3D3D;
  font-size: 18px;

  &:hover {
    color: red;
    cursor: pointer;
  }

  transition: color .2s;
}

.m-fic-date {
  color: #3D3D3D;
  font-size: 12px;
}

.m-fic-desc {
  color: #595959;
  font-size: 14px;
}

.m-fic-comment {
  border-radius: 0;
  overflow: hidden !important;
  transition: all 0.3s linear;
}

.m-fic-comment {
  box-shadow: inset 0 0 10px #bebebe,
    inset -5px -5px 10px #ffffff;

  .m-fic-comment-text {
    font-size: 16px;
    font-weight: 500;
  }

  .m-fic-comment-author {
    font-size: 14px;
  }

  .m-fic-comment-date {
    font-size: 10px;
    color: var(--text-gray-color);
  }
}

</style>
